<template>
  <div class="mapIndex">
    <vae-map  :options="options"     id="map_jdtqohyj"    @init-map="initMap" ></vae-map>
  </div>
</template>

<script>
import  geojson from "@/../public/mapJson/100000_full.json"
import Vue from 'vue'
import vpopup from './popup_jdtq.vue'
export default {
  name: "map",
  props:{
    vm:null
  },
  data() {
    return {
      options:{
        zoom:3.5,
        zoomDelta:0.2,
      },
      // baseLayers:['GaoDe.Satellite.Map','GaoDe.Satellite.Annotion'],
      baseLayers:L.layerGroup(),
      map:null,
      markerLayers:L.layerGroup(),
      markers:new Map(),
      geojsonMap:null,
      allMineData:[],
      levelMap:{
        "01":"#db2d2d ",
        "02":"#fc7500",
        "03":"#e3ca21",
        "04":"#00b4ff",
      },
     iconFont:{
        "ts":'icon iconfont icon-jiance',//态势预警更名-态势监测
        "sg":'icon iconfont icon-zhuizong',//事故预警更名-事故追踪
        "zh":'icon iconfont icon-tianqi1',//灾害更名-极端天气
        "ws":'icon iconfont icon-wasi',//瓦斯预警-更名-地压冲击
        "jd":'icon iconfont icon-kuangyadiya',//瓦斯预警
        "gz":'icon iconfont icon-fenxi',//感知预警-更名综合分析
      },
      active:"",
      listMap:[
        {name:"态势预警",num:10,type:"ts"},
        {name:"事故预警",num:10,type:"sg"},
        {name:"灾害预警",num:10,type:"zh"},
        {name:"瓦斯量",num:10,type:"ws"},
        {name:"极端天气",num:10,type:"jd"},
      ],
      tileLayer: L.layerGroup(),
      mapJson:[
        {name:"贵州中岭矿业有限责任公司中岭煤矿",id:"1",lat:26.700332,lng:105.238521,address:"贵州毕节",type:"大风",content:"未来24小时毕节地区可能受大风影响,平均风力可达6级，阵风7级，请区域内矿山注意防范。"},
        {name:"贵州广盛源集团矿业有限公司荔波县立化镇下寨煤矿",id:"2",lat:26.406612,lng:106.241334,address:"贵州黔南",type:"大风",content:"未来24小时毕节地区可能受大风影响,平均风力可达6级，阵风7级，请区域内矿山注意防范。"},
        {name:"铁法煤业（集团）有限责任公司大兴煤矿",id:"3",lat:26.23888,lng:105.925869,address:"辽宁铁岭",type:"雷电",content:"未来1到3小时，出现雷雨大风天气，平均风力可达8级以上，阵风风力可达10级以上，同时可能伴有冰雹、短时强降水等强对流天气，请区域矿山注意防范"},
        {name:"平庄煤业（集团）有限责任公司元宝山露天煤矿",id:"4",lat:42.048224,lng:119.29862,address:"内蒙古赤峰",type:"雷电",content:"未来24小时内蒙古赤峰市有大风天气，请辖区内矿山注意防范因雷电、大风引起的停电事故。"},
        {name:"辽源矿业（集团）有限责任公司金宝屯煤矿",id:"5",lat:42.947636,lng:125.151955,address:"吉林辽源",type:"强降雨",content:"预计未来12小时仍将有30-50毫米降水，请区域内矿山注意防范。"},
        {name:"四川广旺能源发展（集团）有限责任公司",id:"6",lat:32.430757,lng:105.873413,address:"四川广元",type:"强降雨",content:"四川盆地北部和西部、甘肃东南部、陕西南部等地的部分地区有大到暴雨（100～180毫米），请区域内矿山注意防范"},
        {name:"西乡县木竹坝煤矿有限责任公司",id:"7",lat:32.94055,lng:108.075751,address:"陕西汉中",type:"强降雨",content:"四川盆地北部和西部、甘肃东南部、陕西南部等地的部分地区有大到暴雨（100～181毫米），请区域内矿山注意防范"},
        {name:"冀中能源股份有限公司东庞矿西井",id:"8",lat:36.870231,lng:114.281707,address:"河北邢台",type:"水位",content:"观4钻孔实时预警: 10.3807381m≥降阈值3.00m"},
        {name:"开滦能源化工股份有限公司范各庄矿业分公司",id:"9",lat:39.651969,lng:118.455707,address:"河北唐山",type:"水位",content:"冲17钻孔实时预警: 20.550m≥降阈值12.00m"},
      ],
    }
  },
  created(){
  },
  methods:{
      initMap(v){
        this.map=v;
        this.initAll();
      },
      initAll(){
        this.markerLayers.clearLayers();
        this.baseLayers.clearLayers();
        this.baseLayers.addTo(this.map);
        this.markerLayers.addTo(this.map);
        this.geojsonMap=  L.geoJSON(geojson.features, {
          style: (feature) => {
            return {
              fillColor: "#5a7ace",
              weight: 2,
              opacity: 1,
              color: '#0262ea',
              dashArray: '1',
              fillOpacity: 0.6,
              data: {},
            }
          },
          onEachFeature: (feature, layer) => {//遍历每一个数据，也就是为每一个地点加上监听器
            let name = feature.properties.name.slice(0, 2);
            let divIcon = L.divIcon({
              html: `<div style="font-size: 3px;color: #fff">${name == '内蒙' || name == '黑龙' ? feature.properties.name.slice(0, 3) : name}</div>`,
              className: 'text-light',
              iconSize: [40, 16],
            })
            if (feature.properties.center) {
              L.marker([feature.properties.center[1] - 0.6, feature.properties.center[0] - 0.2], {riseOffset: 0, direction: 'left',interactive: true,  draggable: false }).setIcon(divIcon).addTo(this.baseLayers)
              layer.on({ mouseover: this.highlightFeature,  mouseout: this.resetHighlight, });
            }

          },
        }).addTo(this.map);
        this.map.fitBounds(this.geojsonMap.getBounds());
        this.initMarker()
      },
      //公共样式
      resetHighlight(e) {//当鼠标退出后reset
          var layer = e.target;
          layer.closePopup();
          this.geojsonMap.resetStyle(e.target);//  geojson要先定义
        },
      highlightFeature(e) {//当鼠标拂过时高亮显示
          var layer = e.target;
          layer.openPopup();
          layer.setStyle({
            weight: 3,
            dashArray: '',
            color: '#0723db',
            fillOpacity: 0.6,
            fillColor: "#1CDDFF"
          });
          if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
          }
        },
      mapFillColor(feature,) {
          return {
            fillColor: this.getColor(feature.properties.adcode).color,
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '1',
            fillOpacity: 0.7,
            data: this.getColor(feature.properties.adcode).data
          }
      },
      async  initMarker() {
        this.mapJson.forEach(v => {
          let icon = L.glyphicon({
            icon: 'icon iconfont icon-tianqi1',
            size: "26",//编译为width:24px,height:24px
            fontSize: "14",
            background: this.levelMap['01'],
            color: '#fff',
            borderRadius: 26,//跟size一样大为圆形
            borderWidth: 1,
            borderColor:'#fff',
            boxShadow: false,
            additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
            className: 'className',
            effect: {
              type: null,//设置'halo'则默认开启光晕效果
              size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
              color: this.levelMap['01'],//扩散的光晕的颜色
              interval: 3//动画的时长
            }
          });
          let marker = L.marker([v.lat,v.lng], { riseOffset: 300,interactive: true, draggable: false }).setIcon(icon).bindTooltip(v.address).addTo(this.markerLayers)
          this.markers.set(v.id,marker)
          // this.bindPopup(marker,v);
          marker.on("click",e=>{
            // this.$emit("markerClick",v)
            if(v.id=="5"){
              this.vm.$refs.jdtqohyjView.initdiaLine()
            }
            this.markerClick(v,true)
          })
        })
    },
    bindPopup(marker,v) {
        console.log(v)
        let popupContent = "<div id='popup-" +v.id  + "' style='height:180px;'></div>";
        marker.bindPopup(popupContent, {offset: L.point(1, -10), minWidth: 250, closeButton: true});
        marker.on('popupopen', (e) => {
          new Vue({
            el: '#popup-' + v.id,
            render: h => h(vpopup, {props: {vdata: v, vm: this}})
          })
        });
    },
    markerClick(row,isOK){
      let target=this.markers.get(row.id)
      let icon = L.glyphicon({
          icon: 'icon iconfont icon-tianqi1',
          size: "26",//编译为width:24px,height:24px
          fontSize: "14",
          background: this.levelMap['01'],
          color: '#fff',
          borderRadius: 26,//跟size一样大为圆形
          borderWidth: 1,
          borderColor:'#fff',
          boxShadow: false,
          additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
          className: 'className',
          effect: {
            type: null,//设置'halo'则默认开启光晕效果
            size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
            color: this.levelMap['01'],//扩散的光晕的颜色
            interval: 3//动画的时长
          }
        });
      this.markers.forEach((v) => {v.setIcon( icon); });
      console.log(target)
      if(target){
        let flashIcon = L.glyphicon({
          icon: 'icon iconfont icon-tianqi1',
          size: "26",//编译为width:24px,height:24px
          fontSize: "14",
          background: this.levelMap['01'],
          color: '#fff',
          borderRadius: 26,//跟size一样大为圆形
          borderWidth: 1,
          borderColor:'#fff',
          boxShadow: false,
          additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
          className: "animated infinite flash slow",
          effect: {
            type: "halo",//设置'halo'则默认开启光晕效果
            size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
            color: this.levelMap['01'],//扩散的光晕的颜色
            interval: 3//动画的时长
          }
        });
        this.map.flyTo([row.lat,row.lng],6)
        target.setIcon(flashIcon);
        // target.openPopup();
        if(isOK){
           this.vm.$refs.jdtqohyjView.filterMapJson(row.id)
        }
      }
    },
  }
}
</script>

<style lang="less">
.iconMap{
  width: 2vw;
  height: 2vw;

}
.mapIndex{
  width: 100vw;
  height: 100vh;
  background: url("../../../public/images/indexBanner.png") no-repeat;
  background-size: 100%  100%;
  position: relative;

  .list{
    z-index: 1000;
    position: absolute;
    background: url("../../../public/images/bj1.png") no-repeat;
    padding: 1vh 0  1vh 0.5vh;
    background-size: 100% 100%;
    width: 11vw;
    left: 29vw;
    top: 11vh;
    color: #fff;
    .colorList{
      font-size: 1.2vh;
      padding-left: 0.5vw;
      padding-bottom: 0.5vh;
    }
    .iconColor{
      display: inline-block;
      width: 0.4vw;
      height: 0.4vw;
      border-radius: 80%;
    }
    .level1{
      background: #fb0d0dFF;
    }
    .level2{
      background: #fe9c00FF;
    }
    .level3{
      background: #ffdc6aFF;
    }
    .level4{
      background: #0d5afbFF;
    }
    .row{
      cursor: pointer;
      line-height: 2vh;
      font-size:1.2vh;
      padding-left: 0.5vw;
      padding-right: 0.5vw;
      color: #fff;
      .icon{

        padding-right: 0.5vw;
      }
    }
    .row.active{
      background: url("../../../public/images/bj.png") no-repeat;
    }
    .row:hover{
      background: url("../../../public/images/bj.png") no-repeat;
    }
  }
}

</style>
<style>
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: transparent;
  background: url("../../../public/images/panel_bg2.png") no-repeat;
  background-size: 100% 100%;
  box-shadow:none;
  color: #FFF8DC;

}
</style>
